import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    header: {
        height: 60,
        backgroundColor: '#1e3a8a',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        overflow: 'hidden',
    },
    headerBackground: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: '100%',
        height: '100%',
    },
    headerContent: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 20,
        zIndex: 1,
        width: '100%',
        position: 'relative',
    },
    logo: {
        width: 32,
        height: 32,
        position: 'absolute',
        left: 20,
    },
    headerText: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#ffffff',
        textShadowColor: 'rgba(0, 0, 0, 0.3)',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 2,
        flex: 1,
        textAlign: 'center',
    },
    backButton: {
        position: 'absolute',
        left: 20,
        top: 14.5,
        zIndex: 2,
        width: 32,
        backgroundColor: '#ffffff',
        borderRadius: 16,
        height: 32,
        justifyContent: 'center',
        alignItems: 'center',
    },
    backIcon: {
        width: 24,
        height: 24,
    },
    content: {
        flex: 1,
        padding: 20,
        alignItems: 'center',
        justifyContent: 'center',
    },
    contentText: {
        fontSize: 16,
        color: '#666',
    },
    contentSubText: {
        fontSize: 14,
        color: '#999',
        marginTop: 10,
    },
    ganttContainer: {
        flex: 1,
        backgroundColor: '#ffffff',
        margin: 10,
        borderRadius: 8,
        overflow: 'hidden',
        elevation: 1,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        zIndex: 1,
    },
    webview: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
    // 控制面板样式
    controlPanel: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        backgroundColor: '#ffffff',
        zIndex: 9999,
    },
    leftControls: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    rightControls: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    controlButton: {
        paddingVertical: 8,
        paddingHorizontal: 12,
        backgroundColor: '#f0f0f0',
        borderRadius: 5,
        marginLeft: 8,
        borderWidth: 1,
        borderColor: '#ddd',
    },
    controlButtonText: {
        fontSize: 14,
        color: '#333',
    },
    activeButton: {
        backgroundColor: '#1e3a8a',
        borderColor: '#1e3a8a',
    },
    activeButtonText: {
        color: '#ffffff',
    },
    dropdownContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5,
        paddingVertical: 8,
        paddingHorizontal: 15,
        backgroundColor: '#ffffff',
        minWidth: 150,
    },
    dropdownText: {
        fontSize: 14,
        color: '#333',
        flex: 1,
    },
    dropdownIcon: {
        width: 16,
        height: 16,
    },
    dropdownWrapper: {
        position: 'relative',
        zIndex: 9999,
        elevation: 9999,
    },
    dropdownList: {
        position: 'absolute',
        top: '100%',
        left: 0,
        right: 0,
        backgroundColor: '#ffffff',
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5,
        marginTop: 2,
        maxHeight: 200,
        minWidth: 150,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 10,
        zIndex: 9999,
    },
    // 模态框样式
    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalContent: {
        backgroundColor: '#ffffff',
        borderRadius: 10,
        padding: 20,
        width: '80%',
        maxHeight: '70%',
    },
    modalHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        paddingBottom: 10,
    },
    modalTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#333',
    },
    modalCloseButton: {
        fontSize: 16,
        color: '#666',
        padding: 5,
    },
    searchInput: {
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 5,
        padding: 10,
        marginBottom: 15,
        fontSize: 16,
    },
    loadingText: {
        textAlign: 'center',
        fontSize: 16,
        color: '#666',
        padding: 20,
    },
    deptItem: {
        paddingHorizontal: 16,
        paddingVertical: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    deptList: {
        maxHeight: 200,
    },
    deptItemText: {
        fontSize: 16,
        color: '#333',
    },
    emptyText: {
        textAlign: 'center',
        fontSize: 16,
        color: '#999',
        padding: 20,
    },

    // 工单详情弹窗样式
    taskDetailModal: {
        backgroundColor: '#ffffff',
        borderRadius: 12,
        width: '30%', // 减少宽度，不要太宽
        maxHeight: '70%', // 减少高度
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 4,
        },
        shadowOpacity: 0.25,
        shadowRadius: 8,
        elevation: 8,
    },
    taskDetailHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 20,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    taskDetailTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#333',
    },
    closeButton: {
        width: 30,
        height: 30,
        borderRadius: 15,
        backgroundColor: '#f5f5f5',
        justifyContent: 'center',
        alignItems: 'center',
    },
    closeButtonText: {
        fontSize: 20,
        color: '#666',
        fontWeight: 'bold',
    },
    taskDetailContent: {
        padding: 20,
    },
    taskDetailRow: {
        flexDirection: 'row',
        marginBottom: 15,
        alignItems: 'flex-start',
    },
    taskDetailLabel: {
        fontSize: 14,
        color: '#666',
        width: 80,
        fontWeight: '500',
    },
    taskDetailValue: {
        fontSize: 14,
        color: '#333',
        flex: 1,
        fontWeight: '400',
    },

    // 资源详情卡片样式
    resourceModalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'flex-end',
    },
    resourceModalOverlayTouchable: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 1,
    },
    resourceDetailCard: {
        backgroundColor: '#ffffff',
        borderRadius: 0, // 去掉圆角
        width: '70%',
        height: '100%', // 高度全屏
        shadowColor: '#000',
        shadowOffset: {
            width: -4,
            height: 0,
        },
        shadowOpacity: 0.25,
        shadowRadius: 8,
        elevation: 8,
        zIndex: 1000, // 降低Modal的z-index，让DatePicker能够显示在最上层
        flexDirection: 'column', // 确保垂直布局
        position: 'relative', // 为绝对定位的子元素提供定位上下文
        overflow: 'hidden', // 防止内容溢出
        justifyContent: 'space-between', // 确保头部、内容和底部按钮分布均匀
    },
    resourceDetailHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 20,
        paddingTop: 0,
        paddingBottom: 0,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        height: 60, // 固定头部高度
        flex: 0, // 不参与flex布局的伸缩
    },
    resourceDetailTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#333',
    },
    resourceDetailContent: {
        flex: 1,
        padding: 20,
        width: '100%',
        minHeight: 300, // 增加最小高度，确保可以滚动
    },
    resourceDetailText: {
        fontSize: 48,
        color: '#333',
        textAlign: 'center',
        fontWeight: 'bold',
    },

    // 工单选择区域样式
    workOrderSection: {
        marginBottom: 30,
        width: '100%',
    },
    sectionLabel: {
        fontSize: 16,
        fontWeight: '600',
        color: '#333',
        marginBottom: 12,
    },
    workOrderDropdownContainer: {
        position: 'relative',
        width: '100%',
    },
    workOrderDropdown: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#f8f9fa',
        borderWidth: 1,
        borderColor: '#e9ecef',
        borderRadius: 8,
        paddingHorizontal: 16,
        paddingVertical: 14,
        minHeight: 50,
    },
    workOrderDropdownText: {
        fontSize: 16,
        color: '#333',
        flex: 1,
    },
    placeholderText: {
        color: '#999',
    },
    workOrderDropdownIcon: {
        width: 20,
        height: 20,
        tintColor: '#666',
    },
    workOrderDropdownList: {
        position: 'absolute',
        top: '100%',
        left: 0,
        right: 0,
        backgroundColor: '#ffffff',
        borderWidth: 1,
        borderColor: '#e9ecef',
        borderRadius: 8,
        marginTop: 4,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 4,
        zIndex: 1000,
        maxHeight: 300,
    },
    workOrderSearchContainer: {
        padding: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    workOrderSearchInput: {
        backgroundColor: '#f8f9fa',
        borderWidth: 1,
        borderColor: '#e9ecef',
        borderRadius: 6,
        paddingHorizontal: 12,
        paddingVertical: 10,
        fontSize: 14,
        color: '#333',
    },
    workOrderList: {
        maxHeight: 200,
        flexGrow: 0,
    },
    workOrderItem: {
        paddingHorizontal: 16,
        paddingVertical: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    workOrderItemText: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
        marginBottom: 4,
    },
    workOrderItemSubText: {
        fontSize: 12,
        color: '#666',
    },
    workOrderEmptyText: {
        fontSize: 14,
        color: '#999',
        textAlign: 'center',
        padding: 20,
    },
    workOrderLoadingContainer: {
        padding: 20,
        alignItems: 'center',
    },
    workOrderLoadingText: {
        fontSize: 14,
        color: '#666',
        textAlign: 'center',
    },

    // 批次选择区域样式
    batchSection: {
        marginBottom: 30,
        width: '100%',
    },
    batchDropdownContainer: {
        position: 'relative',
        width: '100%',
    },
    batchDropdown: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#f8f9fa',
        borderWidth: 1,
        borderColor: '#e9ecef',
        borderRadius: 8,
        paddingHorizontal: 16,
        paddingVertical: 14,
        minHeight: 50,
    },
    batchDropdownText: {
        fontSize: 16,
        color: '#333',
        flex: 1,
    },
    batchDropdownIcon: {
        width: 20,
        height: 20,
        tintColor: '#666',
    },
    batchDropdownList: {
        position: 'absolute',
        top: '100%',
        left: 0,
        right: 0,
        backgroundColor: '#ffffff',
        borderWidth: 1,
        borderColor: '#e9ecef',
        borderRadius: 8,
        marginTop: 4,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 4,
        zIndex: 1000,
        maxHeight: 300,
    },
    batchLoadingContainer: {
        padding: 20,
        alignItems: 'center',
    },
    batchLoadingText: {
        fontSize: 14,
        color: '#666',
        textAlign: 'center',
    },
    batchList: {
        maxHeight: 200,
        flexGrow: 0,
    },
    batchItem: {
        paddingHorizontal: 16,
        paddingVertical: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    batchItemText: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
    },
    batchEmptyText: {
        fontSize: 14,
        color: '#999',
        textAlign: 'center',
        padding: 20,
    },

    // 工序展示区域样式
    processSection: {
        marginBottom: 30,
        width: '100%',
        overflow: 'visible',
    },
    processScrollView: {
        flexGrow: 0,
        overflow: 'visible',
    },
    processCard: {
        backgroundColor: '#f8f9fa',
        borderWidth: 1,
        borderColor: '#e9ecef',
        borderRadius: 8,
        padding: 16,
        marginRight: 12,
        minWidth: 80,
        alignItems: 'center',
        justifyContent: 'center',
        position: 'relative',
        overflow: 'visible',
    },
    processNumber: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 4,
    },
    processName: {
        fontSize: 12,
        textAlign: 'center',
    },
    processLoadingContainer: {
        padding: 20,
        alignItems: 'center',
    },
    processLoadingText: {
        fontSize: 14,
        color: '#666',
        textAlign: 'center',
    },
    processEmptyText: {
        fontSize: 14,
        color: '#999',
        textAlign: 'center',
        padding: 20,
    },

    otherInfoSection: {
        width: '100%',
    },
    infoText: {
        fontSize: 14,
        color: '#666',
        textAlign: 'center',
        fontStyle: 'italic',
    },

    // 工序选中状态样式
    selectedProcessCard: {
        borderWidth: 2,
        borderColor: '#1e3a8a',
        elevation: 3,
        shadowColor: '#1e3a8a',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.3,
        shadowRadius: 4,
    },
    processCheckmark: {
        position: 'absolute',
        top: -8,
        right: -8,
        width: 20,
        height: 20,
        borderRadius: 10,
        backgroundColor: '#2F54EB',
        justifyContent: 'center',
        alignItems: 'center',
        elevation: 3,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.3,
        shadowRadius: 3,
        borderWidth: 1,
        borderColor: '#e9ecef',
        zIndex: 10,
    },
    processCheckmarkText: {
        fontSize: 12,
        fontWeight: 'bold',
        color: '#ffffff',
    },

    // 派工信息区域样式
    dispatchInfoSection: {
        marginBottom: 30,
        width: '100%',
    },
    dispatchItem: {
        marginBottom: 20,
        width: '100%',
    },
    dispatchLabel: {
        fontSize: 16,
        fontWeight: '600',
        color: '#333',
        marginBottom: 12,
    },
    dispatchDropdownContainer: {
        position: 'relative',
        width: '100%',
    },
    dispatchDropdown: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#f8f9fa',
        borderWidth: 1,
        borderColor: '#e9ecef',
        borderRadius: 8,
        paddingHorizontal: 16,
        paddingVertical: 14,
        minHeight: 50,
    },
    dispatchDropdownText: {
        fontSize: 16,
        color: '#333',
        flex: 1,
    },
    dispatchDropdownIcon: {
        width: 20,
        height: 20,
        tintColor: '#666',
    },

    // 派工下拉框列表样式
    dispatchDropdownList: {
        position: 'absolute',
        top: '100%',
        left: 0,
        right: 0,
        backgroundColor: '#ffffff',
        borderWidth: 1,
        borderColor: '#e9ecef',
        borderRadius: 8,
        marginTop: 4,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 4,
        zIndex: 1000,
        maxHeight: 120,
    },
    dispatchDropdownScrollView: {
        maxHeight: 170,
    },
    dispatchDropdownItem: {
        paddingHorizontal: 16,
        paddingVertical: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
        minHeight: 44,
        justifyContent: 'center',
    },
    dispatchDropdownItemText: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
        marginBottom: 4,
    },
    dispatchDropdownItemSubText: {
        fontSize: 12,
        color: '#666',
    },
    dispatchDropdownEmptyText: {
        fontSize: 14,
        color: '#999',
        textAlign: 'center',
        padding: 20,
    },

    // 时间选择样式
    timeSelectionContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        width: '100%',
    },
    timeInput: {
        flex: 1,
        backgroundColor: '#f8f9fa',
        borderWidth: 1,
        borderColor: '#e9ecef',
        borderRadius: 8,
        paddingHorizontal: 16,
        paddingVertical: 14,
        minHeight: 50,
        justifyContent: 'center',
    },
    timeInputText: {
        fontSize: 16,
        color: '#333',
    },
    timeSeparator: {
        fontSize: 16,
        color: '#666',
        marginHorizontal: 12,
        fontWeight: '500',
    },
    timeHintText: {
        fontSize: 12,
        color: '#999',
        marginTop: 8,
        fontStyle: 'italic',
    },
    timeSelector: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
    },
    timeText: {
        fontSize: 16,
        color: '#333',
        flex: 1,
    },
    arrowIcon: {
        width: 18,
        height: 18,
        marginLeft: 6,
        resizeMode: 'contain',
    },

    // 提交按钮样式
    submitSection: {
        marginTop: 20,
        width: '100%',
    },
    submitButton: {
        backgroundColor: '#2F54EB',
        borderRadius: 8,
        paddingVertical: 12,
        paddingHorizontal: 24,
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 2,
        shadowColor: '#1e3a8a',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.3,
        shadowRadius: 4,
        minWidth: 80,
        minHeight: 44,
        borderWidth: 0,
        flex: 0,
    },
    submitButtonText: {
        fontSize: 16,
        fontWeight: '500',
        color: '#ffffff',
        textAlign: 'center',
    },

    // 提交按钮禁用状态样式
    submitButtonDisabled: {
        backgroundColor: '#ccc',
        opacity: 0.6,
    },
    submitButtonTextDisabled: {
        color: '#999',
    },

    // 派工卡片内容容器样式
    resourceDetailContentContainer: {
        paddingBottom: 20, // 正常的底部padding
        minHeight: '100%', // 强制最小高度，确保可以滚动
        flexGrow: 1, // 允许内容增长
    },

    // 派工卡片底部按钮区域样式
    resourceDetailFooter: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
        paddingHorizontal: 20,
        paddingVertical: 16,
        borderTopWidth: 1,
        borderTopColor: '#eee',
        backgroundColor: '#ffffff',
        gap: 12,
        height: 60, // 固定高度
        zIndex: 1001, // 确保在最上层，但低于DatePicker
        flex: 0, // 不参与flex布局的伸缩
    },
    cancelButton: {
        backgroundColor: '#f5f5f5',
        borderRadius: 8,
        paddingVertical: 12,
        paddingHorizontal: 24,
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 1,
        borderColor: '#ddd',
        minWidth: 80,
        minHeight: 44,
        flex: 0,
    },
    cancelButtonText: {
        fontSize: 16,
        fontWeight: '500',
        color: '#666',
        textAlign: 'center',
    },

    // DatePicker弹出层样式 - 确保在最上层
    datePickerOverlay: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 9999, // 设置比Modal更高的z-index
        pointerEvents: 'box-none', // 允许子组件接收触摸事件
        justifyContent: 'center',
        alignItems: 'center',
    },

    // DatePicker容器样式
    datePickerContainer: {
        backgroundColor: '#ffffff',
        borderRadius: 8,
        padding: 20,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        minWidth: 300,
    },

    // 全局DatePicker样式覆盖
    globalDatePickerStyle: {
        zIndex: 9999, // 确保DatePicker在最上层
    },
});
